<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="{{asset('/layuiadmin/layui/css/layui.css')}}" media="all">
<link rel="stylesheet" href="{{asset('/layuiadmin/style/admin.css')}}" media="all">
<style>
    .img{width:130px;height:90px;overflow: hidden;}
    .img img{width:100%;height:100%;}
    .layui-layer-nobg{width: none !important;}
    /*.layui-layer-content{width:600px;height:550px;}*/
    .layui-card-header{width:200px;text-align: left;float:left;}
    .layui-card-body{margin-left:28px;}
    .layui-upload-img{width: 120px; height: 120px; /*margin: 0 10px 10px 0;*/}
    .up{position: relative;display: inline-block;cursor: pointer;border-color: #1ab394; color: #FFF;width: auto !important;font-size: 10px !important;text-align: center !important;}
    .up input{position: absolute;top:0;left: 0;display: block;opacity: .01;width: 100px;height:30px;}
    .layui-upload-list{width: 120px;height:120px;overflow: hidden;margin: 10px auto;}
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}
    .storebox{
        height:200px;
        overflow-y: auto;
        z-index: 999;
        position: absolute;
        left: 0px;
        top: 36px;
        width:298px;
        background-color:#ffffff;
        border: 1px solid #ddd;
    }
    .storebox .list{
        height:38px;line-height: 38px;cursor:pointer;
        padding-left:10px;
    }
    .storebox .list:hover{
        background-color:#eeeeee;
    }
</style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card" style="">
      <div class="layui-card-header">添加商品</div>
      <div class="layui-card-body layui-row layui-col-space10">
        <div class="layui-form">
            <div class="layui-form-item school editStoreSel" style="width:500px;display:none">
                <label class="layui-form-label" style="text-align:center">门店名称</label>
                <div class="layui-input-block">
                    <input type="text" style="border-radius:5px"name="schoolname" id="schooltype" lay-verify="schoolname" autocomplete="off" placeholder="请输入门店名称" class="layui-input inputstore">
                    <div class="storebox" style='display: none'></div>
                </div>
            </div> 
            <div class="layui-form-item" style="width:500px">
                <label class="layui-form-label">商品分类:</label>
                <div class="layui-input-block">
                    <select name="goodsCate" id="goodsCate" lay-filter="goodsCate">
                    </select>
                    <div class="userbox" style='display: none'></div>
                </div>
            </div>
            <div class="layui-form-item" style="width:500px">
                <label class="layui-form-label" style="text-align:center">商品标题</label>
                <div class="layui-input-block">
                    <input type="text" name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入商品标题" class="layui-input templatename">
                </div>
            </div>
            <div class="layui-form-item" style="width:500px">
                <label class="layui-form-label" style="text-align:center">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</label>
                <div class="layui-input-block">
                    <input type="number" name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入数量" class="layui-input templatenum">
                </div>
            </div>
            <div class="layui-form-item" style="width:500px">
                <label class="layui-form-label" style="text-align:center">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="layui-input-block">
                    <input type="text" name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入编码" class="layui-input templatecode">
                </div>
            </div>
            <div class="layui-form-item" style="width:500px">
                <label class="layui-form-label" style="text-align:center">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</label>
                <div class="layui-input-block">
                    <input type="number" name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入价格" class="layui-input templateprice">
                </div>
            </div>
            <div class="layui-form-item" style="width:500px">
                <label class="layui-form-label" style="text-align:center">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序</label>
                <div class="layui-input-block">
                    <input type="text" name="schoolname" lay-verify="schoolname" autocomplete="off" placeholder="请输入序号" class="layui-input templatesort">
                </div>
            </div>
            <div class="layui-form-item" style="width:500px">
            <div class="layui-form-label" style="text-align:center">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</div>
            <div class="layui-input-block">
            <div class="layui-col-md12">
                <input type="checkbox" name="statusswitch" lay-skin="switch" id="tongguo" lay-text="显示|隐藏" checked>
            </div>
            </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align:center">封面图片</label>
                <div class="layui-card">                        
                    <div class="layui-card-body" style="margin-left:0;padding:0;float:left;">
                        <div class="layui-upload">
                            <button class="layui-btn up" style="border-radius:5px;margin-left:5px;"><input type="file" name="img_upload" class="test1">上传封面图片</button>
                            <div class="layui-upload-list">
                               <img class="layui-upload-img" id="demo1">
                               <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn submit" style="border-radius:5px">确定提交</button>
                        <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                    </div>
                </div>
            </div>
        </div>        
      </div>
    </div>
</div>

<input type="hidden" class="storeid" value="">
<input type="hidden" class="storename" value="">

<script src="{{asset('/layuiadmin/layui/layui.js')}}"></script> 
<script>
    var token = localStorage.getItem("Usertoken");

    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        formSelects: 'formSelects'
    }).use(['index', 'table','form','upload'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,element = layui.element
            ,upload = layui.upload
            ,form = layui.form;

            element.render();

        // 未登录,跳转登录页面
        $(document).ready(function(){
            if(token==null){
                window.location.href="{{url('/user/login')}}"; 
            }
        });
        
        var editInfo = sessionStorage.getItem('editGoods') ? JSON.parse(sessionStorage.getItem('editGoods')) : '';
        console.log(editInfo,'editInfo----')
        var isEdit = editInfo ? true : false;
        if(editInfo){ //修改
            $('.templatename').val(editInfo.title);
            $('.templatenum').val(editInfo.num);
            $('.templatecode').val(editInfo.code);
            $('.templatesort').val(editInfo.sort);
            $('.storeid').val(editInfo.store_id);
            $('.templateprice').val(editInfo.price);
            $('#demo1').attr('src',editInfo.img);
            $('.layui-card-header').text('编辑商品')
            $('#tongguo').prop('checked', editInfo.status == 2 ? true : false);
            $('.userbox').val(editInfo.store_goods_cate_id);
            if(editInfo.store_id != -1){
                $('.editStoreSel').show()
                $.post("{{url('/api/user/store_lists')}}",
                {
                token:token
                ,store_name:editInfo.store_id
                ,l:100
                },function(res){
                    console.log(res,res.data[0].store_name,'res---')
                var html="";
                if(res.t!==0){
                    $('.inputstore').val(res.data[0].store_name)
                }
                },"json");
            }else{
                $('.editStoreSel').hide()
            }
            
            form.render();
        }

         // 商品分类列表
         $.ajax({
            url : "{{url('/api/user/goods_cate')}}",
            data : {token:token},
            type : 'get',
            dataType:'json',
            success : function(data) {
                var optionStr = "";
                for(var i=0;i<data.data.length;i++){
                    if(data.data[i].id == editInfo.store_goods_cate_id){
                        optionStr += "<option value='" + data.data[i].id + "' selected>"
                        + data.data[i].title + "</option>";
                        }else{
                            optionStr += "<option value='" + data.data[i].id + "'>"
                            + data.data[i].title + "</option>";
                        }
                }
                $("#goodsCate").append('<option value="">选择商品分类</option>'+optionStr);
                layui.form.render('select');
            },
            error : function(data) {
                alert('查找板块报错');
            }
        });

        // 选择服务商
        form.on('select(goodsCate)', function(data){
            var provider_id = data.value;
            $('.userbox').val(provider_id);
        });
        
        $(".inputstore").bind("input propertychange",function(event){
        store_name = $(this).val();
        if (store_name.length == 0) {
          $('.storebox').html('');
          $('.storebox').hide();
        } else {
          $.post("{{url('/api/user/store_lists')}}",
                  {
                    token:token
                    ,store_name:$(this).val()
                    ,l:100
                  },function(res){
                    var html="";
                    if(res.t==0){
                      $('.storebox').html('');
                    }else{
                      for(var i=0;i<res.data.length;i++){
                        html+='<div class="list" data='+res.data[i].store_id+'>'+res.data[i].store_name+'</div>'
                      }
                      $(".storebox").show();
                      $('.storebox').html('');
                      $('.storebox').append(html);
                    }
                  },"json");
        }
      });

        $(".storebox").on("click",".list",function(){
            $('.inputstore').val($(this).html());
            $('.storeid').val($(this).attr('data'));
            $('.storename').val($(this).html());
            $('.storebox').hide();
        });

        //普通图片上传

        var uploadInst = upload.render({
            url : "{{url('/api/basequery/webupload?act=images')}}"+'&token='+token,  //提交到的地址 可以自定义其他参数
            elem : '.test1',  //指定元素的选择器，默认直接查找class为layui-upload-file的元素
            method : 'POST',    //设置http类型，如：post、get。默认post。也可以直接在input设置lay-method="get"来取代。
            type : 'images',    //[images 图片类型，默认][file普通文件类型][video视频文件类型][audio音频文件类型]
            ext : 'jpg|png|gif|jpeg',    //自定义支持的文件格式
            unwrap : true, //是否不改变input的样式风格。默认false 
            size : 5120,
            before : function(input){
                //执行上传前的回调  可以判断文件后缀等等
                layer.msg('上传中，请稍后......', {icon:16, shade:0.5, time:0});
            },
            done: function(res){
                if(res.status == 0){
                    layer.msg(res.msg, {icon:2, shade:0.5, time:res.time});
                }else{
                    layer.msg("文件上传成功", {icon:1, shade:0.5, time:res.time});
                    layui.jquery('#demo1').attr("src", res.data.img_url);
                }
            }
        });
        $('.submit').on('click', function(){
            let params = {
                token:token,
                title:$('.templatename').val(),
                num:$('.templatenum').val(),
                code:$('.templatecode').val(),
                sort:$('.templatesort').val(),
                store_id:-1,
                price:$('.templateprice').val(),
                img:$('#demo1').attr('src'),
                status:$('#tongguo').is(':checked') ? '2' : '1',
                store_goods_cate_id:$('.userbox').val()
            }
            if(isEdit){
                params['id'] = editInfo.id;
                if(editInfo.store_id != -1){
                    params['store_id'] = $('.storeid').val()
                }
            }
            $.post("{{url('/api/user/add_goods')}}",
            params,function(res){
//                console.log(res);
                if(res.status==1){
                    layer.msg(res.message, {
                        offset: '50px'
                        ,icon: 1
                        ,time: 3000
                    });
                }else{
                    layer.msg(res.message, {
                        offset: '50px'
                        ,icon: 2
                        ,time: 3000
                    });
                }
            },"json");
        });
    });

</script>
</body>
</html>
